<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>珍贵回忆</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/memories.css">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Nunito:wght@300;400;600;700&display=swap"
          rel="stylesheet">
</head>
<body>
<!-- 背景粒子系统 -->
<canvas id="particles-canvas"></canvas>

<!-- 音乐控制 -->
<div class="music-control">
    <button id="music-toggle" class="music-btn">🎵</button>
</div>

<!-- 导航栏 -->
<nav class="top-nav">
    <button class="nav-btn" onclick="window.location.href='story.html'">📖 上一页</button>
    <h1 class="page-title">珍贵回忆</h1>
    <button class="nav-btn" onclick="window.location.href='wishes.html'">💌 下一页</button>
</nav>

<!-- 主内容 -->
<div class="memories-container">
    <!-- 电影院背景 -->
    <div class="cinema-background">
        <div class="screen-glow"></div>
        <div class="popcorn-container">
            <div class="popcorn"></div>
            <div class="popcorn"></div>
            <div class="popcorn"></div>
            <div class="popcorn"></div>
            <div class="popcorn"></div>
        </div>
    </div>
    <!-- 页面标题 -->
    <div class="memories-header">
        <h2 class="memories-title">🎬 小公主的珍贵回忆</h2>
        <p class="memories-subtitle">每一个瞬间都值得珍藏</p>
    </div>

    <!-- 电影票选择区 -->
    <div class="tickets-container" id="tickets-container">

    </div>


    <!-- 视频播放区 -->
    <div class="video-theater">
        <div class="theater-screen">
            <div class="spotlight spotlight-left"></div>
            <div class="spotlight spotlight-right"></div>


            <video id="main-video" controls poster="../images/baby1.jpg">
                <source src="../videos/baby_video1.mp4" type="video/mp4">
                您的浏览器不支持视频播放。
            </video>

            <div class="video-overlay hidden">
                <div class="play-button">
                    <div class="play-icon">▶</div>
                </div>
            </div>
        </div>

        <!-- 视频控制栏 -->
        <div class="video-controls">
            <button class="control-btn" id="prev-video">⏮️</button>
            <button class="control-btn" id="play-pause">▶️</button>
            <button class="control-btn" id="next-video">⏭️</button>
            <div class="volume-control">
                <button class="control-btn" id="volume-toggle">🔊</button>
                <input type="range" id="volume-slider" min="0" max="100" value="50">
            </div>
            <button class="control-btn" id="fullscreen">⛶</button>
        </div>
    </div>

    <!-- 回忆相册 -->
    <div class="photo-gallery">
        <h3 class="gallery-title">📸 精彩瞬间</h3>
        <div class="photos-grid" id="photos-grid">
            <div class="photo-item" data-image="../images/baby1.jpg">
                <img src="../images/baby1.jpg" alt="宝贝照片1">
                <div class="photo-overlay">
                    <span class="photo-caption">第一次微笑</span>
                </div>
            </div>
            <div class="photo-item" data-image="../images/baby2.jpg">
                <img src="../images/baby2.jpg" alt="宝贝照片2">
                <div class="photo-overlay">
                    <span class="photo-caption">学会坐立</span>
                </div>
            </div>
            <div class="photo-item" data-image="../images/baby3.jpg">
                <img src="../images/baby3.jpg" alt="宝贝照片3">
                <div class="photo-overlay">
                    <span class="photo-caption">开始爬行</span>
                </div>
            </div>
            <div class="photo-item" data-image="../images/baby4.jpg">
                <img src="../images/baby4.jpg" alt="宝贝照片4">
                <div class="photo-overlay">
                    <span class="photo-caption">第一次站立</span>
                </div>
            </div>
            <div class="photo-item" data-image="../images/baby5.jpg">
                <img src="../images/baby5.jpg" alt="宝贝照片5">
                <div class="photo-overlay">
                    <span class="photo-caption">一周岁啦</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <button class="nav-button" onclick="window.location.href='welcome.html'">
            <span class="nav-icon">🏠</span>
            <span class="nav-label">首页</span>
        </button>
        <button class="nav-button" onclick="window.location.href='story.html'">
            <span class="nav-icon">📖</span>
            <span class="nav-label">故事</span>
        </button>
        <button class="nav-button" onclick="window.location.href='invitation.html'">
            <span class="nav-icon">💌</span>
            <span class="nav-label">邀请</span>
        </button>
        <button class="nav-button" onclick="window.location.href='wishes.html'">
            <span class="nav-icon">💝</span>
            <span class="nav-label">祝福</span>
        </button>
    </div>
</div>

<!-- 图片查看器 -->
<div id="photo-viewer" class="photo-viewer hidden">
    <div class="viewer-overlay"></div>
    <div class="viewer-content">
        <button class="viewer-close">✕</button>
        <img id="viewer-image" src="" alt="">
        <div class="viewer-caption"></div>
        <div class="viewer-controls">
            <button class="viewer-btn" id="viewer-prev">◀</button>
            <button class="viewer-btn" id="viewer-next">▶</button>
        </div>
    </div>
</div>

<!-- 音频 -->
<audio id="background-music" loop>
    <source src="../audio/background.wav" type="audio/wav">
</audio>

<audio id="applause-sound" preload="auto">
    <source src="../audio/applause.mp3" type="audio/mpeg">
</audio>

<script src="../js/particles.js"></script>
<script src="../js/memories.js"></script>
</body>
</html>

